<template>
  <div class="github-info">
    <div class="info">
      <div class="avatar">
        <img :src="data.info.avatar_url" alt="" />
      </div>
      <p>{{ data.info.login }}</p>
    </div>
    <div class="repos-list">
      <p>仓库列表：</p>
      <div class="repos-item" v-for="(i, index) in data.info.repos_list">
        <p>仓库{{ index + 1 }}</p>
        <p>仓库名称：{{ i.name }}</p>
        <p>仓库描述：{{ i.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive } from "vue";

type user_info = {
  login: string;
  avatar_url: string;
  repos_list: Array<repo>;
};

type repo = {
  name: string;
  description: string;
};

let info: user_info = {
  login: "",
  avatar_url: "",
  repos_list: [],
};

let data = reactive({
  info: info,
});

axios
  .get("https://api.github.com/users/YancyZhang30")
  .then((res) => {
    data.info = res.data;
    return axios.get(res.data.repos_url);
  })
  .then((res) => {
    data.info.repos_list = res.data;
  })
  .catch((error) => {
    alert(error);
  });
</script>

<style scoped>
.github-info {
  display: flex;
  padding: 20px;
}

.avatar img {
  width: 200px;
  height: 200px;
}

.repos-list p {
  margin: 0;
}

.repos-item {
  padding: 10px 0;
}
</style>
